<template>
  <div class="tableWrap">
    <el-table :loading="loading" ref="tables" :data="data" :columns="columns" v-bind="$attrs"
      @current-change="onCurrentChange" @select="onSelect" @select-cancel="onSelectCancel" @select-all="onSelectAll"
      @selection-change="onSelectionChange" @sort-change="onSortChange" @row-click="onRowClick"
      @row-dblclick="onRowDblclick" @on-expand="onExpand" @changeWeight="changeWeight" disabled-hover
      :max-height="maxHeight">
      <el-table-column v-if="showCheckbox" type="selection" width="90"></el-table-column>
      <el-table-column v-if="showIndex" type="index" label="序号" :index="1" width="90"></el-table-column>

      <el-table-column v-for="(item, index) in columns" :key="index" :prop="item.prop" :label="item.label"
        show-overflow-tooltip :sortable="item.sortable" :width="item.width ? item.width : ''"
        :filters="item.filters || null" :filter-method="item.filterMethod">
        <template #default="scope">
          <slot v-if="item.isTemplate" :name="item.prop" :row="scope.row"></slot>
          <template v-else>{{ scope.row[item.prop] }}</template>
        </template>
      </el-table-column>

      <el-table-column :label="action" v-if="isAction">
        <template #default="row">
          <span v-if="isweightShow" class="isweightShow-table" @click="issue(row)">{{ row.row.weight }}</span>
          <span v-if="downBtn" class="downBtn-table" @click="downRow(row)">下载</span>
          <span v-if="lookBtn" class="lookBtn-table" @click.prevent="look(row)">查看</span>
          <span v-if="submitBtn" class="submitBtn-table" @click="submit(row)">提交</span>
          <span v-if="editBtn" class="editBtn-table" @click="edit(row)">编辑</span>

          <span v-if="activationBtn" class="activeBtn-table" @click="activeOpen(row)">
            <span v-if="row.status == '0'">激活</span>
            <span v-else>关闭</span>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <table-details :isModal="isModal" :tableTitle="lookItem" :dataObject="lookIObject" @lookOver="lookOverOK">
    </table-details>
  </div>
</template>
<script lang="ts">
import modal from "@/components/modals/modal.vue";
import utils from "@/utils/utils";
// import { mapGetters, mapActions } from "vuex";
// import tableDetails from "@/components/table/table-details.vue";
import {
  defineComponent,
  reactive,
  onMounted,
  toRefs,
  getCurrentInstance,
  ref,
  nextTick,
  defineAsyncComponent,
} from "vue";
// import { ElMessage } from "node_modules/element-plus/es";
import drop from "../drop/drop.vue";
export default {
  components: {
    drop,
    modal,
  },
  props: {
    action: {
      // 自定义行的名称
      type: String,
      default: "操作",
    },
    showIndex: {
      //是否显示序号列(从1开始)
      type: Boolean,
      default: false,
    },
    isAction: {
      type: Boolean,
      default: false,
    },
    showCheckbox: {
      //是否显示多选框
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      required: true,
    },
    lookBtn: {
      //查看按钮是否显示
      type: Boolean,
      default: false,
    },
    downBtn: {
      //下载按钮是否显示
      type: Boolean,
      default: false,
    },
    activationBtn: {
      // 激活按钮是否显示
      type: Boolean,
      default: false,
    },
    editBtn: {
      //编辑按钮是否显示
      type: Boolean,
      default: false,
    },
    submitBtn: {
      //提交按钮是否显示
      type: Boolean,
      default: false,
    },
    setBtnText: {
      type: String,
      default: "设置",
    },
    operateBtn: {
      //操作按钮是否显示
      type: Boolean,
      default: false,
    },
    columns: {
      // 表头
      type: Array,
      required: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    maxHeight: {
      type: String,
      default: "500",
    },

  },
  setup(props, { emit }) {
    const {
      appContext: {
        config: { globalProperties },
      },
    } = getCurrentInstance() as any;
    const state = reactive({
      currentExpandIndex: undefined,
      isModal: false,
      item: {},
      getCurrentExpandIndex: "",
      data1: props.data,
      lookBtn: props.lookBtn,
      isAction: props.isAction,
      operateBtn: props.operateBtn,
      action: "操作",
      isShow: false,
    });
    onMounted(() => {
    });
    const detailTask = (row: any) => {
      emit("detailTask", row);
    };
    const look = (row: any) => {
      emit("look", row);
    };
    const down = (row: any) => {
      emit("down", row);
    };
    const check = (row: any) => {
      emit("check", row);
    };
    const update = (row: any) => {
      emit("update", row);
    };
    const handle = (row: any) => {
      emit("handle", row);
    };
    const edit = (row: any) => {
      emit("edit", row);
    };
    const plan = (row: any) => {
      emit("plan", row);
    };
    const remove = (row: any) => {
      emit("remove", row);
    };
    const dataDetails = (row: any) => {
      emit("dataDetails", row);
    };

    const taskDeduce = (row: any) => {
      emit("taskDeduce", row);
    };
    const startServe = (row: any) => {
      emit("startServe", row);
    };

    const task = (row: any) => {
      emit("task", row);
    };
    const resultToken = (row: any) => {
      emit("resultToken", row);
    };
    const resultPost = (row: any) => {
      emit("resultPost", row);
    };
    const infer = (row: any) => {
      emit("infer", row);
    };
    const taskData = (row: any) => {
      emit("taskData", row);
    };
    const resultDown = (row: any) => {
      emit("resultDown", row);
    };
    const taskRepeat = (row: any) => {
      emit("taskRepeat", row);
    };
    const createProcess = (row: any) => {
      emit("createProcess", row);
    };
    const imageView = (row: any) => {
      emit("imageView", row);
    };
    const basicAbility = (row: any) => {
      emit("basicAbility", row);
    };
    const basicAbilityFinally = (row: any) => {
      emit("basicAbilityFinally", row);
    };
    const resultInput = (row: any) => {
      emit("resultInput", row);
    };
    const product = (row: any) => {
      emit("product", row);
    };
    const productUpload = (row: any) => {
      emit("productUpload", row);
    };
    const setProduct = (row: any) => {
      emit("setProduct", row);
    };
    const setProductScore = (row: any) => {
      emit("setProductScore", row);
    };
    const allScore = (row: any) => {
      emit("allScore", row);
    };
    const efficiency = (row: any) => {
      emit("efficiency", row);
    };
    const report = (row: any) => {
      emit("report", row);
    };
    const reportDetails = (row: any) => {
      emit("reportDetails", row);
    };
    const newAgain = (row: any) => {
      emit("newAgain", row);
    };
    const reportDown = (row: any) => {
      emit("reportDown", row);
    };
    const model = (row: any) => {
      emit("report", row);
    };
    const upload = (row: any) => {
      emit("upload", row);
    };

    const implement = (row: any) => {
      emit("implement", row);
    };
    const operate = (row: any) => {
      emit("operate", row);
    };
    const deleted = (row: any) => {
      emit("deleted", row);
    };
    const terminate = (row: any) => {
      emit("terminate", row);
    };
    const confirmFn = (row: any) => {
      emit("confirmFn", row);
    };

    const recovery = (row: any) => {
      emit("recovery", row);
    };
    const actionSelect = (row: any, data: any) => {
      // emit("actionSelect", row, data);
      emit("actionSelect", row, data);

      // console.log(row);
    };
    const outputPost = (row: any) => {
      emit("outputPost", row);
    };
    const submit = (row: any) => {
      state.item = row;
      emit("submit", row);
    };
    const issue = (row: any) => {
      state.item = row;
    };
    const detail = (row: any) => {
      emit("detail", row);
    };
    const planAnalysis = (row: any) => {
      emit("planAnalysis", row);
    };
    const processRepeat = (row: any) => {
      emit("processRepeat", row);
    };
    const relevance = (row: any) => {
      emit("relevance", row);
    };
    const back = (row: any) => {
      emit("back", row);
    };
    //查看
    const lookOver = (item: any) => {
      state.isModal = true;
    };
    //确定查看
    const lookOverOK = () => {
      state.isModal = false;
    };
    const onCurrentChange = (currentRow: any, oldCurrentRow: any) => {
      emit("on-current-change", currentRow, oldCurrentRow);
    };
    const onSelect = (selection: any, row: any) => {
      // console.log('点击触发onSelect', row)
      // 评估模板页面选择控制开始
      if (row.checked != undefined) {
        props.data.forEach((element, index) => {
          if (row.id == element.id) {
            element.checked = !element.checked;
          }
        });
        nextTick(() => {
          props.data.forEach((element, index) => {
            if (element.checked) {
              tables.value.toggleRowSelection(props.data[index]);
            }
          });
        });
      }
      // 评估模板页面选择控制结束
      emit("on-select", selection, row);
    };
    const onSelectCancel = (selection: any, row: any) => {
      emit("on-select-cancel", selection, row);
    };
    const onSelectAll = (selection: any) => {
      // 评估模板页面选择控制开始
      if (selection.length == 0) {
        props.data.forEach((element, index) => {
          element.checked = false;
        });
      } else {
        props.data.forEach((element, index) => {
          element.checked = true;
        });
      }
      nextTick(() => {
        props.data.forEach((element, index) => {
          if (element.checked) {
            tables.value.toggleRowSelection(props.data[index]);
          }
        });
      });
      // 评估模板页面选择控制结束
      emit("on-select-all", selection);
    };
    const onSelectionChange = (selection: any) => {
      // this.isModal = true;
      emit("on-selection-change", selection);
    };
    const onSortChange = (column: any, key: any, order: any) => {
      emit("on-sort-change", column, key, order);
    };
    const onFilterChange = (row: any) => {
      emit("on-filter-change", row);
    };
    const onRowClick = (row: any, index: any) => {
      emit("on-row-click", row, index);
    };
    const onRowDblclick = (row: any, index: any) => {
      emit("on-row-dblclick", row, index);
    };
    const onExpand = (row: any, status: any) => {
      emit("on-expand", row, status);
    };
    //确定删除
    const confirmDelete = (row: any) => {
      emit("confirmDelete", row);
    };
    //取消删除
    const cancelDelete = () => {
      globalProperties.$message.success("点击了取消");
    };
    //确定恢复
    const confirmRecovery = (row: any) => {
      emit("confirmRecovery", row);
    };
    //取消恢复
    const cancelRecovery = () => {
      globalProperties.$message.success("点击了取消");
    };
    // 下载赶牛
    const downRow = (row: any) => {
      emit("downRow", row);
    };
    const delCancel = (row: any) => {
      emit("delCancel", row);
    };

    const tables = ref<null | HTMLElement>(null);
    //复选选项
    const returnItem = (data: any) => {
      nextTick(() => {
        data.forEach((element: any, index: any) => {
          if (element.checked) {
            tables.value.toggleRowSelection(data[index]);
          }
        });
      });
    };
    const changeWeight = (row: any) => {
      props.data.forEach((element, index) => {
        if (element.id == row.row.id) {
          element.checked = true;
        }
      });
      nextTick(() => {
        props.data.forEach((element, index) => {
          if (element.checked) {
            tables.value.toggleRowSelection(props.data[index]);
          }
        });
      });
    };
    // 设置
    const setsBtn = (row: any) => {
      emit("setsBtn", row);
    };
    const monitorBtn = (row: any) => {
      emit("monitorBtn", row);
    };
    // 样本标注任务管理详情事件
    const taskInfo = (row: any) => {
      emit("taskInfo", row);
    };
    // 样本标注任务管理取消事件
    const taskCancel = (row: any) => {
      emit("taskCancel", row);
    };
    // 样本标注任务管理预览事件
    const taskPreview = (row: any) => {
      emit("taskPreview", row);
    };
    // 点击某行触发的事件
    const cellClick = (row: any) => {
      emit("cellClick", row);
    };
    // 点击评估报告触发的事件
    const appraisalReport = (row: any) => {
      emit("appraisalReport", row);
    };
    // 激活按钮
    const activeOpen = (row: any) => {
      emit("activeOpen", row);
    };
    return {
      ...toRefs(state),
      detailTask,
      look,
      check,
      update,
      deleted,
      terminate,
      submit,
      issue,
      detail,
      relevance,
      actionSelect,
      back,
      recovery,
      lookOver,
      lookOverOK,
      onCurrentChange,
      onSelect,
      onSelectCancel,
      onSelectAll,
      onSelectionChange,
      onSortChange,
      onFilterChange,
      onRowClick,
      onRowDblclick,
      onExpand,
      confirmDelete,
      cancelDelete,
      down,
      cancelRecovery,
      confirmRecovery,
      operate,
      implement,
      handle,
      edit,
      plan,
      task,
      infer,
      taskData,
      resultDown,
      imageView,
      basicAbility,
      basicAbilityFinally,
      product,
      productUpload,
      setProduct,
      setProductScore,
      allScore,
      efficiency,
      report,
      reportDetails,
      newAgain,
      reportDown,
      model,
      upload,
      remove,
      downRow,
      confirmFn,
      delCancel,
      tables,
      returnItem,
      changeWeight,
      startServe,
      resultInput,
      createProcess,
      processRepeat,
      taskRepeat,
      planAnalysis,
      dataDetails,
      taskDeduce,
      resultToken,
      resultPost,
      setsBtn,
      monitorBtn,
      taskInfo,
      taskCancel,
      taskPreview,
      cellClick,
      outputPost,
      appraisalReport,
      activeOpen,
    };
  },
};
</script>
<style lang="less" scoped>
// 删除弹窗框背景色
:deep .my-modal {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

// .tableWrap {
//   width: 100%;
//   height: 100%;
// }
.el-table {
  // width: 50% !important;
  width: 100%;
  color: @main-font-color;
  background: transparent;
  border: none;
  // border-top: 1px solid #1d3870;
  // border-bottom: 1px solid #1d3870;
}

.cell {
  color: @main-font-color;
  // border: 1px solid;
}

.el-table thead {
  background: #085276 !important;
}

.el-table--enable-row-transition .el-table__body tr:nth-of-type(even) {
  background: #002c3d;
}

.el-table--enable-row-transition .el-table__body tr:nth-of-type(odd) {
  background: #023a50;
}

:deep .el-table__body-wrapper {
  width: 100%;
  max-height: 500px;
  overflow-y: scroll;
}

.table-box {
  width: 100%;

  :deep .el-table tr:nth-child(odd) {
    //偶数行
    background: transparent;
  }

  :deep .el-table tr:nth-child(even) {
    //偶数行
    background: transparent;
  }

  :deep th.el-table__cell.is-leaf {
    text-align: center;
    background: @table-th-bg;
    border: none;
    // border-left: 1px solid @th-border-color;
    color: @main-font-color;
  }

  :deep td.el-table__cell {
    // border-bottom: 1px solid @th-border-color;
    // border-left: 1px solid @th-border-color;
    text-align: center;
  }

  :deep .cell {
    word-break: break-all;
  }

  :deep .el-table__body tr.current-row>td.el-table__cell {
    // color: #000;
    background-color: transparent;
    // color: #fff;
  }

  :deep.el-table tr:hover {
    color: @th-border-color;
  }

  :deep .el-table th.el-table__cell>.cell {
    padding: 0;
  }
}

:deep .el-table th.el-table__cell>.cell .icon-style::before {
  text-align: center;
}

.ouputBtn-table {
  margin-right: 10px;
  cursor: pointer;
}

.detailBtn-table {
  margin-right: 10px;
  cursor: pointer;
}

.setBtn-table {
  cursor: pointer;
}

.icon-yanjing {
  color: #d8af19;
  margin-right: 15px;
}

.img-style {
  width: 24px;
}

.icon-bianji {
  color: #e57514;
  margin-right: 15px;
}

.icon-7 {
  color: #d22062;
}

//表格按钮颜色
.lookBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.updateBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}



.handleBtn-table {
  margin-right: 15px;
  color: rgb(0, 156, 92);
  cursor: pointer;
}




.editBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.planBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.submitBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.taskBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.dataDetailsBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

// 状态为0时
.dataDetailsBtns-table {
  margin-right: 15px;
  color: rgb(134, 129, 129);
  cursor: not-allowed;
  cursor: no-drop;
}


.resultDownBtns-table {
  margin-right: 15px;
  color: rgb(134, 129, 129);
  cursor: not-allowed;
  cursor: no-drop;
}

.taskDeduceBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.reportDetailsBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.startServeBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.newAgainBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.reportDownBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.modelBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.taskDataBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.inferBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.imageViewBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.basicAbilityBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.basicAbilityFinallyBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.setProductScoreBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.productBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.productUploadBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.allScoreBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.setProductBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.efficiencyBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.reportBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.reportBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.resultDownBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

.port {
  cursor: pointer;
}

.implementBtn-cancel-table {
  margin-right: 15px;
  color: #e57514;
  cursor: pointer;
}

.implementBtn-table {
  margin-right: 15px;
  color: rgb(0, 156, 92);
  cursor: pointer;
}

//操作
.operateBtn-table {
  margin-right: 15px;
  color: #ae00ff;
  cursor: pointer;
}

.uploadBtn-table {
  margin-right: 15px;
  // color: #ae00ff;
  cursor: pointer;
}


//群组
.reportBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

//注销
.logoutBtn-table {
  margin-right: 15px;
  color: #ae00ff;
  cursor: pointer;
}


.processRepeatBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

//恢复
.recoveryBtn-table,
.downBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

// 结果导入
.resultInputBtn-table {
  margin-right: 15px;
  color: #00aeff;
  cursor: pointer;
}

//销毁
.destroyBtn-table {
  margin-right: 15px;
  // color: #b1bdb8;
  color: rgb(0, 156, 92);
  cursor: pointer;
}

//资源样式
.sourceManageBtn-table {
  margin-right: 15px;
  color: greenyellow;
  cursor: pointer;
}

// 分发
.distributeBtn-table {
  margin-right: 15px;
  color: greenyellow;
  cursor: pointer;
}

.delBtn-table,
.stopUseBtn-table {
  // margin-right: 15px;
  margin-right: 15px;
  color: #ff0000;
  cursor: pointer;
}

.removeBtn-table {
  margin-right: 15px;
  // color: #ff0000;
  cursor: pointer;
}

.handleBtn-table {
  margin-right: 15px;
  color: rgb(0, 156, 92);
  cursor: pointer;
}

.isweightBtn-table {
  width: 50%;

  .el-input__inner {
    color: #98dcff;
  }
}


.isweightShow-table,
.startUseBtn-table {
  margin-right: 15px;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.public-table {
  color: #9a9a9a !important;
}

.topBtn-table,
.upBtn-table {
  margin-right: 15px;
  color: #c9e1ff;
  cursor: pointer;
}

.isCheck {
  color: #9a9a9a;
}

.encryptBtn-table {
  // color: #8ef258;
  cursor: pointer;
}

.decodeBtn-table {
  // color: #e5540d;
  cursor: pointer;
}

:deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background: transparent;
  color: @main-font-color;
}

.red {
  color: red;
}

.green {
  color: green;
}

.yellow {
  color: yellow;
}

.drop {
  margin: 0 auto;
}

.my-modal {
  color: @main-font-color;
}

.my-modal .operate-item {
  text-align: left;
}

.disabled {
  color: #ccc;
}

.el-table--small {
  font-size: @main-font-size;
}

// 样本标注任务管理详情按钮
.taskDetailBtn-table {
  color: #8080ff;
  cursor: pointer;
  margin-right: 15px;
}

// 取消按钮
.cancelBtn-table {
  color: #d7d7d7;
  cursor: pointer;
  margin-right: 15px;
}

.process-style {
  width: 120px !important;
  margin: 0 15px;
}

.el-button--small {
  padding: 8px 7px;
}

.status-box {
  border: 1px solid #00aeff;
}
</style>
